<!-- <template>
  <!-- <form action="">
    <label for="">用户名</label>
    <input type="text"><br>
    <label for="">密码</label>
    <input type="password"><br>
  </form>
  <div class="button-row">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>

    <el-form>
    <el-form-item label="用户名" >
      <el-input  type="text" />
    </el-form-item>
    <el-form-item label="密码" prop="checkPass">
      <el-input
        type="password"
        autocomplete="off"
      />
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" >
        提交
      </el-button>
      <el-button>重置</el-button>
    </el-form-item>
  </el-form>
</template> -->

<template>
   <el-card style="max-width: 480px">
    <template #header>登录</template>
    <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
  >
    <!-- 这里是用户名 -->
    <el-form-item label="用户名" prop="pass">
      <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
    </el-form-item>
    <!-- 这是邮箱 -->
    <el-form-item label="登录邮箱" prop="pass">
      <el-input v-model="ruleForm.email" type="text" autocomplete="off" />
    </el-form-item>
    <!-- 这是密码 -->
    <el-form-item label="密码" prop="checkPass">
      <el-input v-model="ruleForm.password" type="password" autocomplete="off"
      />
    </el-form-item>
    <!-- 再次输入密码 -->
    <el-form-item label="再次输入" prop="pass">
      <el-input v-model="ruleForm.passwordag" type="password" autocomplete="off" />
    </el-form-item>
    <hr><br>
    <label for="">性别</label>
    <div class="mb-2 ml-4">
    <el-radio-group v-model="radio1">
      <el-radio value="1" size="large">男</el-radio>
      <el-radio value="2" size="large">女</el-radio>
    </el-radio-group>
    </div>

    <!-- 学历 -->
    <label for="">学历      </label>
    <el-select v-model="value" placeholder="Select" style="width: 240px">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
    </el-select><br><br>

    <!-- 职业 -->
     <label for="">职业      </label>
    <el-select v-model="value2" placeholder="Select" style="width: 240px">
    <el-option
      v-for="item in zhiyes"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
    </el-select><br><br>

    <!-- 所在城市 -->
     <label for="">所在城市      </label>
     <el-select v-model="value3" placeholder="Select" style="width: 240px">
    <el-option
      v-for="item in weizhi"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
    </el-select><br><br>
    
    <!-- 出生年月 -->
     <label for="">出生年月</label>
     <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration"></span>
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="Pick a day"
        :size="size"
      />
    </div>
    </div><br><br>

    <!-- 猜你喜欢 -->
     <label for="">猜你喜欢</label><br>
    <el-checkbox-group v-model="checkList">
    <el-checkbox label="体育" value="Value A" />
    <el-checkbox label="音乐" value="Value B" />
    <el-checkbox label="游戏" value="Value C" />
    <el-checkbox label="八卦" value="Value D" />
    <el-checkbox label="吐槽" value="Value E" />

    <el-
      label="selected and disabled"
      value="Value selected and disabled"
      disabled
    />
  </el-checkbox-group>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        注册
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
  </el-card>


  
</template>

<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { reactive, ref } from 'vue'
const radio1 = ref('1')

const ruleFormRef = ref<FormInstance>()

const checkAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('Please input the age'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('Please input digits'))
    } else {
      if (value < 18) {
        callback(new Error('Age must be greater than 18'))
      } else {
        callback()
      }
    }
  }, 1000)
}

const checkList = ref(['Value selected and disabled', 'Value A'])


const ruleForm = reactive({
  username: '',
  password: '',
  email: '',
  passwordag: ''

})


const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const value = ref('')

const options = [
  {
    value: 'Option1',
    label: '本科',
  },
  {
    value: 'Option2',
    label: '专科',
  } 
]

const value2 = ref('')

const zhiyes = [
  {
    value: 'Option1',
    label: '学生',
  },
  {
    value: 'Option2',
    label: '上班',
  }
]


const value3 = ref('')

const weizhi = [
  {
    value: 'Option1',
    label: '帝都',
  },
  {
    value: 'Option2',
    label: '大昌市',
  }
]

const size = ref<'default' | 'large' | 'small'>('default')

const value1 = ref('')

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}
</script>